<template>
    <div>
        <h1>房间信息列表</h1>
        房间名称：
        <input type="text" v-model="find.name">
        状态：
        <select v-model="find.stata">
            <option :value="null">请选择</option>
            <option :value="true">启用</option>
            <option :value="false">禁用</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>房间编号</td>
                    <td>房间名称</td>
                    <td>销售价格</td>
                    <td>房间数</td>
                    <td>状态</td>
                    <td>房间号</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data" >
                    <td>{{a.id  }}</td>
                    <td>{{a.name  }}</td>
                    <td>￥{{a.prica  }}</td>
                    <td>{{ a.num }}</td>
                    <td>{{ a.stata?"启用":"停用" }}</td>
                    <td>{{a.roomid  }}</td>
                    <td>
                        <input type="button" value="修改状态" >
                        <input type="button" value="删除" @click="Delroom(a.id)">
                        <input type="button" value="编辑" @click="UpdRoom(a.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            共{{seret.totalpage  }}页，当前第{{find.index  }}页，共{{seret.count  }}行，每页{{find.size  }}行        
        </span>
        <input type="button" value="首页" @click="Fenye(1)">
        <input type="button" value="上一页" @click="Fenye((find.index)-1)">
        <input type="button" value="1" @click="Fenye(1 )">
        <input type="button" value="2" @click="Fenye((find.index)+1)">
        <input type="button" value="3" @click="Fenye(3)">
        <input type="button" value="下一页" @click="Fenye((find.index)+1)">
        <input type="button" value="尾页" @click="Fenye(seret.totalpage)">
        <span>
            <input type="number" >
            <input type="button" @click="Fenye(1)">
            <input type="button" value="跳转" @click="Fenye(2)">
        </span>
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
const Router=useRouter()
onMounted(()=>{
    Show();
})
const UpdRoom=(val:any)=>{
     Router.push({path:'UptView',query:{id:val}})

}
const Fenye=(val:any)=>{
    if(val>0 && val<=seret.value.totalpage){
        find.value.index=val;
        Show();
    }
}
const seret=ref({
    count:0,
    totalpage:0
})
const find=ref({
    name:"",
    stata:null,
    index:1,
    size:2
})
const data=ref([{
    "id": 0,
  "name": "",
  "prica": 0,
  "num": 0,
  "stata": true,
  "roomid": 0,
  "isdelete": true
}])
const Show=()=>{
    axios.get("https://localhost:7131/api/Room/Getroom",{params:find.value}).then(res=>{
        data.value=res.data.data
        seret.value.count=res.data.count
        seret.value.totalpage=Math.ceil(res.data.count/find.value.size);
    })
}
const Delroom=()=>{
    axios.delete("https://localhost:7131/api/Room/DeleteRoom",{params:data.value.id}).then(res=>{
        if(res.data>0){
            alert('删除成功');
            Show();
        }
        else{
            alert('删除失败');
        }
    })
}
</script>
<style scoped></style>